<template>
  <div class="daohanglan">
    <el-carousel :interval="4000" type="card" height="500px">
      <el-carousel-item v-for="item in 3" :key="item">
        <h3 class="medium" style="text-align:center">
          {{item}}
        </h3>
      </el-carousel-item>
    </el-carousel>
    <div class="newsBox">
      <div class="newsChildBox newsLeftBox">
        <div class="title">热搜</div>
        <div class="newsContent" v-for="item in hotNews" :key="item.title">
          <div class="contentItem">
            <div class="childtitle">{{ item.title }}</div>
            <div class="childContent">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <div class="newsChildBox newsCenterBox">
        <div class="title">百科</div>
        <div class="newsContent" v-for="item in hotNews" :key="item.title">
          <div class="contentItem">
            <div class="childtitle">{{ item.title }}</div>
            <div class="childContent">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <div class="newsChildBox newsRightBox">
        <div class="title">动态</div>
        <div class="newsContent" v-for="item in hotNews" :key="item.title">
          <div class="contentItem">
            <div class="childtitle">{{ item.title }}</div>
            <div class="childContent">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryHotSearchList } from '@/api/appIndex'
export default {
  name: 'AppIndex',
  data () {
    return {
      activeIndex: '1',
      hotNews: [],
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    init () {
      // 加载热搜
      queryHotSearchList().then((res) => {
        if (res.code === 10000) {
          this.hotNews = res.datas
        } else {
          this.hotNews = []
        }
      })
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(3) {
  background-image: url('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg');
}
.el-carousel__item:nth-child(4) {
  background-image: url('https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg');
}
.el-carousel__item:last-child {
  background-image: url('https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg');
}
.daohanglan {
  width: 100%;
}
.newsBox {
  width: 80%;
  margin: 0 auto;
}
.newsChildBox {
  display: inline-block;
  vertical-align: top;
  width: 33%;
}
.title {
  font-size: 18px;
  font-weight: 400;
}
.newsContent {
  margin-top: 10px;
}
.contentItem {
  padding: 0 10px 0 20px;
  outline: 1px solid #e8e8e8;
  cursor: pointer;
}
.childtitle {
  line-height: 30px;
  font-size: 22px;
}
.childContent {
  overflow: hidden;
  font-size: 8px "SimSun";
  color: #666;
  margin-top: 5px;
}
</style>
